<template>
    <div>
        <el-form :inline="true" ref="form" :model="form" label-width="66px" class="demo-form-inline">
            <el-form-item label="搜索:" prop="title">
                <el-input size="mini" placeholder="请输入模块名称" v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search" size="mini">搜索</el-button>
            </el-form-item>

        </el-form>
        <el-row>
            <div class="btnlist">
                <div class="btnlist__item">
                    <PersButton v-if="isShowSort" @click="batchSort" size="mini"
                        perms="kanke:textboox:read:batch-sort-show" label="取消-批量排序显示"></PersButton>
                    <PersButton v-else @click="batchSort" size="mini" perms="kanke:textboox:read:batch-sort-show"
                        label="批量排序显示"></PersButton>
                </div>
            </div>
        </el-row>
        <el-row v-loading="loading">
            <div class="content" v-if="tableData.length">
                <div class="content__item" v-for="(item, index) in tableData" :key="`${item.id}`">
                    <el-image style="width: 150px; height: 150px" :src="item.cover_url" :fit="fit"
                        @click="showContent(item)"></el-image>
                    <span class="title">{{ item.title }}</span>
                    <div class="flex-container">
                        <PersButton size="small" @click="handleSortItem(item)" label="排序"
                            perms="kanke:textbook:read:sort"></PersButton>
                        <PersButton size="small" @click="handleDelItem(item)" label="移除"
                            perms="kanke:textboox:read:remove"></PersButton>
                    </div>
                    <div style="margin-top:10px">
                        <el-input style="width:110px" v-if="isShowSort" v-model.number="item.sort_num"
                            placeholder="请输入排序值" @change="updateSortItem(item)"></el-input>
                    </div>
                </div>
            </div>
            <el-empty v-else description="暂无数据"></el-empty>
            <el-pagination v-if="tableData.length > 0" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" :current-page="pageInfo.page" :page-sizes="pageSizes"
                :page-size="pageInfo.page_size" background layout="total, sizes, prev, pager, next, jumper"
                :total="pageInfo.total">
            </el-pagination>
            <!-- 编辑 -->
            <ShowReadContent v-if="dialogContentVisible" :dialogEditVisible.sync="dialogContentVisible" :id="id"
                @handleEditSuccess="closeContent" />
        </el-row>
    </div>
</template>
<script>
import { getShowList, updateSortNum, removeReadShow } from "@/api/kanke/textbook/read";
import { handleResize } from '@/constant/index';
import { COURSEWARE_TYPE_MAP, COURSEWARE_TYPE_COLOR_MAP } from '@/constant/kanke/courseware';
import ShowReadContent from './ShowReadContent.vue'

export default {
    name: "KanKeTextbookReadPane",
    props: {
        type: {
            type: String,
            default: 'all'
        }
    },
    components: {
        ShowReadContent
    },
    data() {
        return {
            loading: false,
            form: {
                title: ''
            },
            pageInfo: {
                page_size: 10,
                page: 1,
                total: 0
            },
            tableData: [],
            pageSizes: [],
            fit: 'contain',
            isShowSort: false,
            dialogContentVisible: false,
            id: 0
        }
    },
    created() {
        this.init();
        // window.addEventListener('resize', this.handleResize);
    },
    destroyed() {
        // window.removeEventListener('resize', this.handleResize); // 移除监听器
    },
    methods: {
        handleResize,
        init() {
            this.loading = true;
            let obj = this.handleResize();
            this.pageSizes = obj.pageSizes
            if (this.pageInfo.page_size == 10) {
                this.pageInfo.page_size = obj.pageSize;
            }
            const params = {
                ...this.form,
                ...this.pageInfo,
                is_show: this.type == 'audit' ? 2 : 1
            };

            getShowList(params).then((res) => {
                this.tableData = res.data.list;
                this.pageInfo.total = res.data.total;
                this.loading = false;
            })
        },
        showContent(item) {
            this.dialogContentVisible = true;
            this.id = item.id;
        },
        closeContent() {
            this.dialogContentVisible = false
        },
        batchSort() {
            this.isShowSort = !this.isShowSort;
        },
        updateSortItem(item) {
            const params = {
                sort_num: item.sort_num,
                id: item.id
            }
            updateSortNum(params).then(res => {
                if (res.code == 200) {
                    this.$message.success(res.msg)
                    this.init()
                }
            })
        },
        handleDelItem(item) {
            this.$confirm('确定要移除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(() => {
                const params = {
                    id: item.id
                }
                removeReadShow(params).then(res => {
                    if (res.code == 200) {
                        this.$message.success(res.msg)
                        this.init()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消移除'
                });
            });

        },
        handleSortItem(item) {
            this.$prompt('请输入新的序号', '修改排序', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputValue: item.sort_num,
                inputPattern: /\d+/,
                inputErrorMessage: '序号不合法,仅支持数字'
            }).then(({ value }) => {
                const params = {
                    sort_num: value,
                    id: item.id
                }
                updateSortNum(params).then(res => {
                    if (res.code == 200) {
                        this.$message.success(res.msg)
                        this.init()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消排序'
                });
            });

        },
        search() {
            this.init()
        },
        handleSizeChange: function (e) {
            console.log(e);
            this.pageInfo.page_size = e;
            this.init();
        },
        handleCurrentChange: function (e) {
            console.log(e);
            this.pageInfo.page = e;
            this.init();
        }
    }
}
</script>
<style lang="scss" scoped>
@import "@/styles/abstract/mixins.scss";

.btnlist {

    padding: 5px 20px;

    &__item {
        margin-right: 25px;
        float: right;
    }

}

.head {
    padding: 5px 20px;

    :nth-child(2) {
        margin-right: 20px;
    }

}

.content {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    margin-bottom: 15px;
    min-height: 700px;

    &__item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 20px;
        padding: 15px 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 14px;

        .title {
            width: 140px;
            max-height: 48px;
            line-height: 16px;
            margin: 10px 0;
            word-break: break-word;
            white-space: normal;
            @include line-clamp(3);
        }

        .el-button {
            width: 50px;
        }

        .flex-container {
            display: flex;
        }

        .flex-container el-button {
            margin-right: 10px;
        }
    }
}
</style>